<template>
	<view style="width: 100%;height: 100%;background-color: #fff;">
		<scroll-view scroll-y="true">
			<view style="width: 100%; font-size: 35rpx;text-align: center;margin-top: 30rpx;">
				房查查
			</view>

			<view style="width: 650rpx;margin: 40rpx;background-color: #ececec;border-radius: 10rpx;height: 70rpx; line-height: 70rpx;
				display: flex;flex-direction: row;align-items: center;">
				<image src="/static/souSuo.png" style="width: 50rpx;height: 40rpx;margin-left: 10rpx;"></image>
				<input style="width: 650rpx;padding-left: 20rpx;
						 padding-right: 20rpx;height: 70rpx;
						 line-height: 70rpx;font-size: 28rpx;" placeholder="请输入" />
			</view>

			<!-- 轮播图 -->
			<swiper indicator-dots autoplay class="lunBoView" indicator-active-color="#ffffff"
				style="margin-top: 50rpx;">
				<swiper-item v-for="(item, index) in imgList" :key="index">
					<image :src="'https://fcc.sdyilian.top'+item.images" class="slide-image"></image>
				</swiper-item>
			</swiper>
			<view style="margin-top: 20rpx;width: 100%;display: flex;flex-direction: row;flex-wrap: wrap">
				<view class="tabr" v-for="(item,index) in tabList" @click="tab(item)">
					<image :src="item.imgUrl" style="width: 52rpx;height: 44rpx;"></image>
					<view style="color: #000;font-size: 25rpx;margin-top: 15rpx;font-weight: 700;">{{item.name}}</view>
				</view>
			</view>
			<view style="width:750rpx;display:flex;justify-content: center;background-color: #fff;">
				<image style="width: 330rpx;height: 191rpx;margin-right: 20rpx;" src="../../static/dtxf.png"></image>
				<image  style="width: 330rpx;height: 191rpx;margin-left: 20rpx;" src="../../static/zdxf.png"></image>
			</view>
			
			<!-- 走马灯 -->
			<!-- <view class="zouMaDengView" style="background-color: #fff;">
				<uni-notice-bar background-color="#fff" color="#333333" show-icon scrollable
					class="text-left full_outer" :text="zouMaDengText" />
			</view> -->
			
			<view style="width: 100%;padding-left: 20rpx;margin-top:50rpx;margin-bottom: 20rpx; background-color: #fff;
			padding-right: 20rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
				<view style="font-size: 40rpx;color: #000;font-weight: 700;">
					热门楼盘
				</view>
			<!-- 	<view style="display: flex;flex-direction: row;width: 150rpx;align-items: center" @click="tiaoZhuan()">
					<view style="#999999;font-size: 25rpx;">查看更多</view>
					<image src="../../static/youJianTou.png" style="width: 20rpx;height: 20rpx;"></image>
				</view> -->
			</view>
			<view style="width: 100%;margin-bottom: 50rpx;background-color: #f9f9f9;padding-top: 10rpx;padding-bottom: 30rpx;">
				<view style="width: 700rpx;margin-left: 25rpx;margin-right: 25rpx;margin-top: 20rpx;margin-bottom: 20rpx;
				border-radius: 10rpx;background-color: #fff;display: flex;flex-direction: row;align-items: center;"
					v-for="(item,index) in LouPanList" @click="tiaoZhuan(item)">
					<view  style="width: 250rpx;height:250rpx;display: flex;flex-direction: row;justify-content: center;align-items: center;">
						<image :src="'https://fcc.sdyilian.top/'+item.cover" style="width: 180rpx;height:180rpx;"></image>
					</view>
					<view>
						<view style="font-size: 30rpx;color: #000; font-weight: 700;">{{item.title}}</view>
						<view style="display: flex;flex-direction: row;margin-left: -10rpx;">
							<view v-for="(i,iidex) in item.intel.tag" style="background-color: #ffc0c0; color: #ff0000;
							padding: 8rpx;border-radius: 10rpx;font-size: 20rpx; margin: 10rpx;">
								{{i}}
							</view>
						</view>
						<view style="display: flex;flex-direction: row;color: #999999;">
							<view style="font-size: 25rpx;">{{item.intel.district_id}}</view>
							<view style="margin-left: 10rpx;font-size: 25rpx;">{{item.intel.region_id}}</view>
							<view style="margin-left: 10rpx;font-size: 25rpx;">面积{{item.intel.occupation_extent}}</view>
						</view>
						<view
							style="display: flex;flex-direction: row;justify-content: space-between;width: 420rpx;margin-top: 10rpx;">
							<view style="font-size: 25rpx;color: #fa4b2b;font-weight: 700;">
								{{item.intel.price}}
							</view>
							<view style="font-size: 30rpx;color: #fa4b2b;font-weight: 700;">{{item.intel.total_price}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- <view style="width: 100%;padding-left: 20rpx;margin-top: 10rpx;
			padding-right: 20rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
				<view style="font-size: 30rpx;color: #333333;font-weight: 600;">
					为您推荐优秀置业顾问和经纪人
				</view>
			</view>

			<view style="display: flex;flex-direction: row;width: auto;width: 100%; flex-wrap: wrap; ">
			
				<view style="width: 250rpx;display: flex;flex-direction: row;justify-content: center;" v-for="(item,index) in guWenList">
					<view style="width: 80%;margin: 10%;background-color: #fff;border-radius: 20rpx;border: 1rpx solid #999999;
							display: flex;flex-direction: column;justify-content: center;align-items:center;
							padding: 15rpx;">
						<image :src="'https://fcc.sdyilian.top/'+item.head" style="width: 80rpx;height: 80rpx;border-radius: 40rpx;"></image>
						<view style="margin-top: 10rpx;">{{item.name}}</view>
						<view  style="margin-top: 10rpx;color: #999999;font-size: 20rpx;">{{item.explain}}</view>
						<view  style="margin-top: 10rpx;color: #fff;background-color: #ff0000;height: 40rpx;
						font-size: 25rpx;line-height: 40rpx;padding-left: 30rpx;padding-right: 30rpx;">立即咨询</view>
					</view>
				</view>
			

			</view>
			-->
		</scroll-view>

	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				imgList: [],
				tabList: [{
						name: '特价房',
						imgUrl: '../../static/info/tjf.png',
						url: ''
					},
					{
						name: '工抵房',
						imgUrl: '../../static/info/gdf.png',
						url: ''
					},
					{
						name: '学区图',
						imgUrl: '../../static/info/xqt.png',
						url: '/pages/xueQuTu/xueQuTu'
					},
					{
						name: '限贷查询',
						imgUrl: '../../static/info/grid5.png',
						url: ''
					},
					{
						name: '购房计算',
						imgUrl: '../../static/info/grid4.png',
						url: '/pages/gouFangJiSuan/gouFangJiSuan'
					},
					{
						name: '读地云',
						imgUrl: '../../static/info/grid10.png',
						url: ''
					},
					{
						name: '航拍看房',
						imgUrl: '../../static/info/hangpai.png',
						url: '/pages/hangPaiKanFang/hangPaiKanFang'
					},
					{
						name: '网签排行',
						imgUrl: '../../static/info/grid3.png',
						url: ''
					},
					{
						name: '最新取证',
						imgUrl: '../../static/info/quzheng.png',
						url: '/pages/zuiXinQuZheng/zuiXinQuZheng'
					},
					{
						name: '房查数据',
						imgUrl: '../../static/info/fxsj.png',
						url: '/pages/fangChaShuJu/fangChaShuJu'
					},

					{
						name: '楼盘PK',
						imgUrl: '../../static/info/pk.png',
						url: ''
					}
				],

				zouMaDengText: '',
				LouPanList: [],
				guWenList:[],
				xzId:-1
			}
		},
		onLoad() {
			that = this;
			that.getList();
			that.getXinWen();
			that.getLouPanList();
			that.getGuWenList();
		},
		methods: {
			tab(item){
				switch(item.name){
					case '航拍看房':
					uni.navigateTo({
						url:item.url
					})
					break
					case '最新取证':
						uni.navigateTo({
							url:item.url
						})
					break
					case '房查数据':
						uni.navigateTo({
							url:item.url
						})
					break
					case '购房计算':
						uni.navigateTo({
							url:item.url
						})
					break
					case '学区图':
						uni.navigateTo({
							url:item.url
						})
					break
				}
			},
			getList() {
				var url = uni.api.API.carousel;
				var parm = {

				}
				uni.api.HTTPREQUEST(url, "get", parm,
					that.getListSuss,
					that.getListFail, 1);
			},
			getListSuss(res) {
				console.log("res==",res)
				that.imgList = res.data.carousel;
			},
			getListFail(msg) {
				console.log(msg);
			},
			getXinWen() {
				var url = uni.api.API.news_reveal;
				var parm = {

				}
				uni.api.HTTPREQUEST(url, "get", parm,
					that.getXinWenSuss,
					that.getXinWenFail, 1);
			},
			getXinWenSuss(res) {
				var data = [];
				for (var i = 0; i < res.data.length; i++) {
					data.push(res.data[i].title)
				}
				that.zouMaDengText = data;
			},
			getXinWenFail(msg) {
				console.log(msg);
			},
			getLouPanList() {
				var url = uni.api.API.getList;
				var parm = {
					page: 1,
					keyword: ""
				}
				uni.api.HTTPREQUEST(url, "get", parm,
					that.getLouPanListSuss,
					that.getLouPanListFail, 1);
			},
			getLouPanListSuss(res) {
				that.LouPanList = res.data.data;
			},
			getLouPanListFail(msg) {
				console.log(msg);
			},
			getGuWenList(){
				var url = uni.api.API.adviser_list;
				var parm = {
					id:2
				}
				uni.api.HTTPREQUEST(url, "get", parm,
					that.getGuWenListSuss,
					that.getGuWenListFail, 1);
			},
			getGuWenListSuss(res){
				that.guWenList=res.data;
				
			},
			getGuWenListFail(msg){
				console.log(msg);
			},
			tiaoZhuan(item){
				that.xzId=item.id;
				that.isDiKuai();	
			},
			isDiKuai(){
				var url = uni.api.API.list;
				var parm = {
					id:that.xzId
				}
				uni.api.HTTPREQUEST(url, "get", parm,
					that.isDiKuaiSuss,
					that.isDiKuaiFail, 1);
			},
			isDiKuaiSuss(res){
				if(res.data==undefined || res.data.length==0){
					uni.navigateTo({
						url:'/pages/diKuai/xiangQing/xiangQing?id='+that.xzId+'&type=1'
					})
				}else{
					uni.navigateTo({
						url:'/pages/diKuai/diKuai?list='+JSON.stringify(res.data)
					})
				}
				console.log(res);
			},
			isDiKuaiFail(msg){
				console.log(msg);
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.tabr {
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		width: 20%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.slide-image {
		width: 100%;
		height: 375rpx;
		border-radius: 20rpx;
	}

	.zouMaDengView {
		width: 650rpx;
		margin: 50rpx;
		border: 1rpx solid #888888;
		background-color: #fff;
		border-radius: 5rpx;

	}
</style>